<template>
  <div :class="wrapClass" v-clickoutside="handleClose"
       @mouseenter="handleMouseenter"
       @mouseleave="handleMouseleave">
    <div :class="[prefixCls + '-rel']" ref="reference"
         @click.stop="handleClick">
      <slot name="trigger">
        <atyButton v-if="triggerCategory=='button'" :type="type">{{text}}
          <icon v-if="hasIcon" type="arrow-down-b" />
        </atyButton>
        <atyLink v-else-if="triggerCategory=='link'">{{text}}
          <icon v-if="hasIcon" type="arrow-down-b" />
        </atyLink>
        <atyText v-else>{{text}}
          <icon v-if="hasIcon" type="arrow-down-b" />
        </atyText>
      </slot>
    </div>
    <transition name="transition-drop">
      <Drop :class="dropdownCls"
            v-show="currentVisible"
            :placement="placement"
            ref="drop"
            :data-transfer="transfer"
            v-transfer-dom
            @mouseenter="handleMouseenterDrop">
        <dropdownMenu :data="data" />
        <slot></slot>
      </Drop>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
